<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-07-05 10:58:14
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-08-21 17:47:37
 * @FilePath: /vue3-uniapp/src/pages/auth/LoginView/LoginView.vue
-->
<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-07-05 10:58:14
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-07-16 08:14:31
 * @FilePath: /vue3-uniapp/src/pages/auth/LoginView/LoginView.vue
-->

<script lang="ts" setup>
import { getStaticImage } from '@/utils/index';
import WxLogin from './components/WxLogin.vue';
import OtherLogin from './components/OtherLogin.vue';

import { useNotifySubject } from '@/service/app/useNotifySubject';
import { useUserStore } from '@/store/index';

const userStore = useUserStore();

const clickLock = ref(false);
const login = async (model: { token: string }) => {
    try {
        if (clickLock.value) return;
        clickLock.value = true;
        console.log(model);
        await userStore.login(model.token);
        userStore.useBackRouteConfig();
    } finally {
        clickLock.value = false;
    }
};
</script>

<template>
    <PageContainer>
        <view class="loginview-container bg-front">
            <FixedTop>
                <BackHomeNabbar :show-back-btn="false" :bottom-shadow="false">
                    <template #default>
                        <view>
                            <view>登录</view>
                        </view>
                    </template>
                </BackHomeNabbar>
            </FixedTop>

            <view class="main">
                <view
                    class="flex flex-col items-center justify-between pt-[60rpx]"
                >
                    <image
                        :src="getStaticImage(`/auth/logo.png`)"
                        class="w-[200rpx] h-[200rpx]"
                    />
                    <view class="c-text text-base fw-700"
                        >北海市网格化管理</view
                    >
                    <view
                        class="flex flex-row items-center align- c-text3 fs-26"
                        style="margin: 20rpx 40rpx 0"
                    >
                        本小程序仅供北海市社会治理网格化服务管理“4+N”人员和部门工作人员使用，相关人员通过已在北海市市域社会治理网格化指挥平台后台登记的手机号进行授权登录
                    </view>
                </view>
                <!-- 微信登录 -->
                // #ifdef MP-WEIXIN
                <WxLogin @submit="(token) => login({ token })" />
                // #endif
                <!-- 非微信登录 -->
                // #ifndef MP-WEIXIN
                <OtherLogin @submit="(token) => login({ token })" />
                // #endif
            </view>

            <FixedBottom />
        </view>
    </PageContainer>
</template>

<style lang="scss">
.loginview-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;

    .main {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}
</style>
